<template>
  <div class="header">
    <el-menu
        :default-active="activeIndex2"
        :router="true"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="#545c64"
        active-text-color="#000"
        @select="handleSelect"
    >
      <div style="height: 60px;line-height: 60px;text-align: center">
        <img src="@/assets/logo.png" style="width: 200px;height: 30px;margin-left: 10px;margin-top: 15px">
      </div>
      <el-menu-item style="margin-left: 50px;">
        <router-link to="/tindex">首页</router-link>
      </el-menu-item>
      <el-menu-item style="margin-left: 30px;">
        <router-link to="/tclass">实践课程</router-link>
      </el-menu-item>
      <el-menu-item disabled style="margin-left: 30px;">
        下载APP
      </el-menu-item>

      <div class="input">
        <el-input
            v-model="input"
            placeholder="请输入课程名"
            class="input-only"
        >
          <template #append>
            <el-button :icon="Search"/>
          </template>
        </el-input>
      </div>
      <!--      <el-menu-item style="margin-left: 30px;">-->
      <!--        <router-link to="/userinfo">个人中心</router-link>-->
      <!--      </el-menu-item>-->

      <el-menu-item style="margin: auto">
        <el-dropdown>
          <p class="el-dropdown-link" style="font-size: 16px; font-family: 'Microsoft YaHei',serif;margin-top: 10px">
            我的
          </p>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/tuserinfo">信息修改</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/login">退出登录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-menu-item>

      <div class="photo">
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {
  Search,
} from '@element-plus/icons-vue'
import {ArrowDown} from '@element-plus/icons-vue'

const activeIndex2 = ref('1')
const input = ref('')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
/*导航栏*/
.header {
  overflow: hidden;
  height: 64px;
}

.header .input {
  height: 30px;
  margin-left: 50px;
  width: 40%;
  border-radius: 20px;
}

.el-input-group__append button.el-button {
  color: #ffffff;
  background-color: #00CC7E;
}

.header .input .input-only {
  top: 12px;
}

.all .header .el-menu-item {
  font-weight: bold;
  display: inline;
}

.photo {
  margin-left: 5px;
  margin-right: 10px;
  margin-top: 5px;
}

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


</style>
